<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>jQuery 三秒后遮罩消失</title>

  <style type="text/css">
    #mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .5);
      text-align: center;
      z-index: 9999;
      display: none;
    }
    #content {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
      background: #ddd;
      color: #333;
      width: 200px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>

<body>
  <div id="mask">
    <div id="content">这是一个测试内容区域</div>
  </div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $("#mask").fadeIn();    //控制遮罩层的显示
    setTimeout(function () {
      $("#mask").fadeOut();   //控制遮罩层的隐藏
    }, 3000);
  });
  // $("#mask").show(); 
  // $("#mask").hide(); 
</script>

</html>